<template>
  <div class="container">
    <h1>
      <span>实验项目视频操作</span>
    </h1>
    <div class="imgList clearfix">
      <ul class="mui-table-view mui-grid-view mui-grid-9 clearfix">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <div class="video">
              <img src="../images/buzhou1.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤1：文件操作</p>
            <p>实现三维场景生成、工作路径设置、模型的生成、导入以及添加数据功能。</p>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <div class="video">
              <img src="../images/buzhou2.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤2：视图导航</p>
            <p>实现对三维地质模型的基础浏览。</p>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <div class="video">
              <img src="../images/buzhou3.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤3：地层设置</p>
            <p>实现地形夸张以及对地层属性的设置。</p>
          </a>
        </li>
        <li style="margin-right:0;" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <div class="video">
              <img src="../images/buzhou4.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤4：空间查询</p>
            <p>实现基本的空间分析功能。</p>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <div class="video">
              <img src="../images/buzhou5.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤5：三维集成</p>
            <p>既地表、地层、地裂缝模型集成。</p>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <div class="video">
              <img src="../images/buzhou6.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤6：三维分析</p>
            <p>实现对三维模型空间分析并将其分析结果三维可视化。</p>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <div class="video">
              <img src="../images/buzhou7.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤7：虚拟钻孔生成</p>
            <p>实现三维虚拟钻孔模型的生成。</p>
          </a>
        </li>
        <li style="margin-right:0;" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <div class="video">
              <img src="../images/buzhou8.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤8：地层切块分析</p>
            <p>绘制块状切块的边界，得到切块结果进行分析。</p>
          </a>
        </li>
        <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <a href="#">
            <div class="video">
              <img src="../images/buzhou9.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤9：三维量算</p>
            <p>该步骤实现三维量算，包括距离和面积量算。</p>
          </a>
        </li>
        <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <a href="#">
            <div class="video">
              <img src="../images/buzhou10.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤10：岩性查询</p>
            <p>该步骤实验岩性查询，包括地层岩性查询和钻孔信息查询</p>
          </a>
        </li>
        <li
          style="margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <a href="#">
            <div class="video">
              <img src="../images/buzhou11.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤11：地层识读</p>
            <p>该步骤进行地层识读，实现断层面识别并绘制出地层结构示意图。</p>
          </a>
        </li>
        <li
          style="margin-right:0;margin-bottom:40px;"
          class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
        >
          <a href="#">
            <div class="video">
              <img src="../images/buzhou12.jpg" alt />
              <div class="mask">
                <span class="el-icon-video-play"></span>
              </div>
            </div>
            <p class="first">实验步骤12：生成实验报告</p>
            <p>输出仿真数据结果，产生分析报告。</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
.container {
  padding: 0 150px;
  margin: 40px 0 20px;
  box-sizing: border-box;
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
  .clearfix {
    *zoom: 1;
  }
  h1 {
    height: 48px;
    line-height: 48px;
    font-size: 20px;
    font-weight: normal;
    border-bottom: 2px solid #d7d7d5;
    position: relative;
    span {
      position: absolute;
      left: 0;
      top: -2px;
      border-bottom: 2px solid #2fb7a1;
      color: #323335;
      font-weight: normal;
    }
  }
  .imgList {
    ul {
      margin: 30px 0 0 0;
      padding: 0;
      li {
        width: 230px;
        height: 190px;
        padding: 0 0 10px 0;
        list-style: none;
        float: left;
        margin-right: 92px;
        margin-bottom: 60px;
        a {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .video {
            width: 230px;
            height: 135px;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .mask {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              .el-icon-video-play {
                position: absolute;
                top: 35px;
                left: 85px;
                font-size: 60px;
                color: transparent;
              }
            }
          }
          .video:hover .mask {
            background: rgba(0, 0, 0, 0.2);
          }
          .video:hover .el-icon-video-play {
            color: #fff;
          }
          .first {
            color: #333;
          }
          p {
            margin: 5px 0 0 10px;
            font-size: 12px;
            color: #999;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .mui-grid-view.mui-grid-9 {
      border: none;
      background-color: #fff;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) {
      margin: 0;
      padding: 0;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
      border: none;
    }
  }
}
</style>